<!-- 物料需求分析-->
<template>
  <div class="container-require">
    <div class="content-wrap">
      <div class="line-logo">
        <line-logo :name="$i18n.t('mesProduceStatistic.materialDemandAnalysis')" />
      </div>
      <div class="scroll-wrap" v-if="requireData.length">
        <div v-for="(row, index) in requireData" :key="index" class="workshop-wrap">
          <div class="workshop-name flex-ac">
            <span class="fw-600 w-150">{{ row.workshopName }}</span>
            <div class="flex-ac mr-20">
              <div>{{ $i18n.t('mesProduceStatistic.list') }}:{{ row.qty }}</div>
              <div>{{ $i18n.t('mesProduceStatistic.numberOfDelivery') }}:{{ row.actualqty }}</div>
              <div>{{ $i18n.t('mesProduceStatistic.differenceNum') }}:{{ row.differencenum }}</div>
            </div>
          </div>
          <div v-if="row.list.length">
            <table>
              <tbody>
                <tr v-for="(li, i) in row.list" :key="i">
                  <td class="w-150">{{ li.lineName }}</td>
                  <td style="padding: 10px;">
                    <div class="flex-ac">
                      <div class="row1">{{ $i18n.t("mesProduceStatistic.list") }}</div>
                      <div class="all-sum flex-1"></div>
                      <div class="ml-15">{{ li.qty }}</div>
                    </div>
                    <div class="flex-ac mtb-10">
                      <div class="row1">{{ $i18n.t("mesProduceStatistic.numberOfDelivery") }}</div>
                      <div
                        class="complete-sum"
                        :style="{
                          'flex-shrink': 1,
                          'flex-basis': '0%',
                          'flex-grow': li.actualqty / li.qty
                        }"
                      ></div>
                      <div class="ml-15">{{ li.actualqty }}</div>
                    </div>
                    <div class="flex-ac">
                      <div class="row1">{{ $i18n.t("mesProduceStatistic.difference") }}</div>
                      <div
                        class="diff-sum"
                        :style="{
                          'flex-shrink': 1,
                          'flex-basis': '0%',
                          'flex-grow': li.differencenum / li.qty
                        }"
                      ></div>
                      <div class="ml-15">{{ li.differencenum }}</div>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <!-- <div v-else class="empty">暂无数据</div> -->
        </div>
      </div>
      <el-empty v-else :image-size="200"></el-empty>
    </div>
  </div>
</template>

<script>
import LineLogo from './line-logo.vue'
export default {
  name: '',
  components: { LineLogo },
  props: {
    requireData: {
      type: Array,
      default: []
    }
  }
}
</script>
<style scoped lang="scss">
.container-require {
  background: #fff;
  width: calc(50% - 5px);
  height: 450px;
  margin-top: 12px;

  .content-wrap {
    height: 100%;
    padding: 12px 0;
  }

  .mr-20 > div {
    margin-right: 20px;
  }

  .flex-ac {
    display: flex;
    align-items: center;
  }

  .w-150 {
    width: 150px;
    text-align: center;
  }

  .line-logo {
    padding: 0 10px;
  }

  .workshop-wrap {
    padding: 10px 12px;
  }

  .scroll-wrap {
    height: calc(100% - 20px);
    overflow-y: auto;
  }

  .workshop-name {
    width: 100%;
    padding: 10px 0;
    font-size: 12px;
  }

  .fw-600 {
    font-weight: 600;
  }

  table {
    border-collapse: collapse;
    width: 100%;
    font-size: 12px;
  }

  td,
  th {
    border: 1px solid #ccc;
    padding: 5px;
  }

  .row1 {
    width: 120px;
    text-align: right;
    padding-right: 12px;
  }

  .ml-15 {
    margin-left: 15px;
  }

  .mtb-10 {
    margin: 10px 0;
  }

  .flex-1 {
    flex: 1;
  }

  .all-sum {
    height: 12px;
    background: #68a2f8;
    opacity: 1;
    border-radius: 8px;
  }

  .complete-sum {
    background: #00bfa5;
    height: 12px;
    opacity: 1;
    border-radius: 8px;
  }

  .diff-sum {
    background: #f4bb5b;
    height: 12px;
    opacity: 1;
    border-radius: 8px;
  }
}
</style>
